<template>
	<view>
		<view id="navtop" class="nav-top">
			<u-tabs-swiper active-color="#FF723C" v-show="check == 1" ref="uTabs" :list="list" :current="current" @change="tabsChange"
				:is-scroll="false" swiperWidth="750" inactive-color="#A8A8A8"></u-tabs-swiper>
		</view>
		<swiper style="background-color: #F9F9F9;" :style="{height:height + 'px'}" :current="swiperCurrent"
			@transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y :style="{height:height + 'px'}" style="width: 100%;"
					@scrolltolower="onreachBottom">
					<view v-if="orderlist.length>0">
						<view class="order-list"  v-for="(it,i) in orderlist" :key="i" @click="goDetail(it, i)">
							<view class="order-list-box" style="padding: 20rpx;">
								<view>
									<u-image width="190" height="190" :src="it.logo"></u-image>
								</view>
								<view class="order-word">
									<view class="">{{it.name}}</view>
									<view class="one-line text-font">订单详情：{{it.title}}</view>
									<view class="text-font">下单时间：{{it.create_at}}</view>
								</view>
								<!-- <view class="order-status" style="color: #FF723B;"
									v-if="it.status == 2 && swiperCurrent == 0">已预约</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 3 && swiperCurrent == 1">洗衣中</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 4 && swiperCurrent == 2">待领取</view>
								<view class="order-status" style="color: #A8A8A8;"
									v-if="it.status == 5 && swiperCurrent == 3">已完成</view>
								<view class="order-status" style="color: #A8A8A8;"
									v-if="it.status == 0 && swiperCurrent == 4">拒绝售后</view>
								<view class="order-status" style="color: #DC3721;"
									v-if="it.status == 1 && swiperCurrent == 4">售后中</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 4 && swiperCurrent == 4">已退款</view> -->
							</view>

						</view>

						<view style="padding: 30rpx 0;">
							<u-loadmore bg-color="#F9F9F9" :status="status" />
						</view>
					</view>
					<view class="zanwu-data" v-else>
						{{check == 1 ? '暂无数据' : '请先登录'}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<tab-bar :selected="1"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabIndex: 1,
				list: [{
						name: '已预约'
					},
					{
						name: '洗衣中'
					},
					{
						name: '待取件'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				height: '',
				status: 'loadmore',
				page: 1,
				total: false,
				orderlist: [],
				order_status: 2, // -1.无效,2.预约成功,3.洗衣中,4.待取件 5已完成
				check:0
			};
		},
		onLoad(options) {
			let loginstatus = uni.getStorageSync('token');
			if(loginstatus)
			{
				this.check = 1
			}
			// this.page = 1
			// this.swiperCurrent = 0
			this.current = options.current
			this.order_status = options.status || 2
		},
		onShow() {
			// this.swiperCurrent = 0
			// this.page = 1
			if(this.check)
			{
				if (this.swiperCurrent == this.list.length - 1) {
					this.getCancel()
				} else {
					this.getOrderList()
				}
			}
		},
		onReady() {
			// nav-top
			const query = uni.createSelectorQuery().in(this);
			query.select('#navtop').boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				let res = uni.getSystemInfoSync()
				console.log(res.windowHeight)
				this.height = res.windowHeight - data.height
			}).exec();
		},
		onPullDownRefresh() {
			this.swiperCurrent = 0
			this.page = 1
			if (this.swiperCurrent == this.list.length - 1) {
				this.getCancel()
			} else {
				this.getOrderList()
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 100)
		},
		methods: {
			// 自定义导航栏
			tabClick(index) {
				console.log('返回tabBar索引：' + index)
				this.currentTabIndex = index
			},
			// 订单列表
			getOrderList() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/order/info', {
					status: this.order_status,
					page: this.page,
					size: 10
				}, false).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						if (this.page == 1) {
							this.orderlist = res.data.data
						} else {
							this.orderlist.push.apply(this.orderlist, res.data.data)
						}
						if (res.data.data.length < 10) this.total = true
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 取消订单列表
			getCancel() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/OrderRefund/info', {
					page: this.page,
					size: 10
				}, false).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						if (this.page == 1) {
							this.orderlist = res.data.data
						} else {
							this.orderlist.push.apply(this.orderlist, res.data.data)
						}
						if (res.data.data.length < 10) this.total = true
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			goDetail(it, i) {
				
				// -1.无效,2.预约成功,3.洗衣中,4.待取件 5已完成
				if (this.swiperCurrent == 4) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/quxiaoyy?id=' + it.id
					})
				} else if (it.status == 2) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/yysuccess?id=' + it.id
					})
				} else if (it.status == 3) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/xyz?id=' + it.id
					})
				} else if (it.status == 4) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/dnaq?id=' + it.id
					})
				} else if (it.status == 5) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/ywc?id=' + it.id
					})
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(index)
				// -1.无效,2.预约成功,3.洗衣中,4.待取件 5已完成
				this.swiperCurrent = index;
				this.page = 1
				this.total = false
				this.orderlist = []
				if (index == 0) {
					this.order_status = 2
					this.getOrderList()
				} else if (index == 1) {
					this.order_status = 3
					this.getOrderList()
				} else if (index == 2) {
					this.order_status = 4
					this.getOrderList()
				} else if (index == 3) {
					this.order_status = 5
					this.getOrderList()
				} else {
					// this.order_status = -1
					this.getCancel()
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// console.log(e)
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.page = 1
				this.total = false
				this.orderlist = []
				if (current == 0) {
					this.order_status = 2
					this.getOrderList()
				} else if (current == 1) {
					this.order_status = 3
					this.getOrderList()
				} else if (current == 2) {
					this.order_status = 4
					this.getOrderList()
				} else if (current == 3) {
					this.order_status = 5
					this.getOrderList()
				} else {
					// this.order_status = -1
					this.getCancel()
				}

			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.total) {
					this.status = 'nomore'
					return false;
				}
				this.status = 'loading'
				this.page++
				if (this.swiperCurrent == this.list.length - 1) {
					this.getCancel()
				} else {
					this.getOrderList()
				}
			}
		}
	};
</script>

<style>
	.order-list {
		background: white;
		margin-top: 20rpx;
		border-radius: 20rpx;
		width: 690rpx;
		margin-left: 30rpx;
	}

	.order-list-box {
		display: flex;
		align-items: center;
		position: relative;
	}

	.order-status {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 26rpx;
	}

	.order-word {
		padding-left: 20rpx;
	}

	.order-word>view:nth-child(1) {
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
	}

	.order-word>view:nth-child(2) {
		width: 365rpx;
		padding: 25rpx 0;
	}

	.text-font {
		font-size: 26rpx;
		color: #A8A8A8;
	}

	.quxiao-but {
		right: 20rpx;
		bottom: 20rpx;
		position: absolute;
		text-align: center;
		line-height: 60rpx;
		width: 185rpx;
		height: 60rpx;
		border: 2rpx solid rgba(167, 167, 167, 1);
		border-radius: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(167, 167, 167, 1);
	}
</style>













<!--==================================== 有待接单 =====================================-->
<!-- <template>
	<view>
		<view id="navtop" class="nav-top">
			<u-tabs-swiper active-color="#FF723C" ref="uTabs" :list="list" :current="current" @change="tabsChange"
				:is-scroll="false" swiperWidth="750" inactive-color="#A8A8A8"></u-tabs-swiper>
		</view>
		<swiper style="background-color: #F9F9F9;" :style="{height:height + 'px'}" :current="swiperCurrent"
			@transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y :style="{height:height + 'px'}" style="width: 100%;"
					@scrolltolower="onreachBottom">
					<view v-if="orderlist.length>0">
						<view class="order-list" v-for="(it,i) in orderlist" :key="i" @click="goDetail(it, i)">
							<view class="order-list-box" style="padding: 20rpx;">
								<view>
									<u-image v-if="it.logo == null" width="190" height="190" src='/static/logo.png'></u-image>
									<u-image v-else width="190" height="190" :src="it.logo"></u-image>
								</view>
								<view class="order-word">
									<view v-if="it.name == null" class="">等待接单</view>
									<view v-else class="">{{it.name}}</view>
									
									<view class="one-line text-font">订单详情：{{it.title}}</view>
									<view class="text-font">下单时间：{{it.create_at}}</view>
								</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 8 && swiperCurrent == 0">待接单</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 2 && swiperCurrent == 1">已接单</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 3 && swiperCurrent == 2">洗衣中</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 4 && swiperCurrent == 3">待领取</view>
								<view class="order-status" style="color: #A8A8A8;"
									v-if="it.status == 5 && swiperCurrent == 4">已完成</view>
								<view class="order-status" style="color: #A8A8A8;"
									v-if="it.status == 0 && swiperCurrent == 5">拒绝售后</view>
								<view class="order-status" style="color: #DC3721;"
									v-if="it.status == 1 && swiperCurrent == 4">售后中</view>
								<view class="order-status" style="color: #FF723B;"
									v-if="it.status == 4 && swiperCurrent == 5">已退款</view>
							</view>

						</view>

						<view style="padding: 30rpx 0;">
							<u-loadmore bg-color="#F9F9F9" :status="status" />
						</view>
					</view>
					<view class="zanwu-data" v-else>
						暂无数据
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<tab-bar :selected="2"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabIndex: 1,
				list: [{
						name: '待接单'
					},{
						name: '已接单'
					},
					{
						name: '洗衣中'
					},
					{
						name: '待取件'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				height: '',
				status: 'loadmore',
				page: 1,
				total: false,
				orderlist: [],
				order_status: 2, // -1.无效,2.预约成功,3.洗衣中,4.待取件 5已完成
			};
		},
		onLoad(options) {
			console.log(options,'options')
			// this.page = 1
			// this.swiperCurrent = 0
			this.current = options.current
			this.order_status = options.status || 8
		},
		onShow() {
			// this.swiperCurrent = 0
			// this.page = 1
			if (this.swiperCurrent == this.list.length - 1) {
				this.getCancel()
			} else {
				this.getOrderList()
			}

		},
		onReady() {
			// nav-top
			const query = uni.createSelectorQuery().in(this);
			query.select('#navtop').boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				let res = uni.getSystemInfoSync()
				console.log(res.windowHeight)
				this.height = res.windowHeight - data.height
			}).exec();
		},
		onPullDownRefresh() {
			this.swiperCurrent = 0
			this.page = 1
			if (this.swiperCurrent == this.list.length - 1) {
				this.getCancel()
			} else {
				this.getOrderList()
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 100)
		},
		methods: {
			// 自定义导航栏
			tabClick(index) {
				console.log('返回tabBar索引：' + index)
				this.currentTabIndex = index
			},
			// 订单列表
			getOrderList() {
				console.log(this.order_status,'this.order_status')
				console.log(this.page,'this.page')
				this.$ajaxRequest.get(this.baseUrl + 'shop/order/info', {
					status: this.order_status,
					page: this.page,
					size: 10
				}, false).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						if (this.page == 1) {
							this.orderlist = res.data.data
						} else {
							this.orderlist.push.apply(this.orderlist, res.data.data)
						}
						if (res.data.data.length < 10) this.total = true
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 取消订单列表
			getCancel() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/OrderRefund/info', {
					page: this.page,
					size: 10
				}, false).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						if (this.page == 1) {
							this.orderlist = res.data.data
						} else {
							this.orderlist.push.apply(this.orderlist, res.data.data)
						}
						if (res.data.data.length < 10) this.total = true
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			goDetail(it, i) {
				// -1.无效,2.预约成功,3.洗衣中,4.待取件 5已完成
				if (this.swiperCurrent == 4) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/quxiaoyy?id=' + it.id
					})
				} else if (it.status == 2) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/yysuccess?id=' + it.id
					})
				} else if (it.status == 3) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/xyz?id=' + it.id
					})
				} else if (it.status == 4) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/dnaq?id=' + it.id
					})
				} else if (it.status == 5) {
					uni.navigateTo({
						url: '/pages/order/orderdetail/ywc?id=' + it.id
					})
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(index,'tabs通知swiper切换')
				// -1.无效,2.预约成功,3.洗衣中,4.待取件 5已完成
				this.swiperCurrent = index;
				this.page = 1
				this.total = false
				this.orderlist = []
				if (index == 0) {
					this.order_status = 8
					this.getOrderList()
				} else if (index == 1) {
					this.order_status = 2
					this.getOrderList()
				} else if (index == 2) {
					this.order_status = 3
					this.getOrderList()
				} else if (index == 3) {
					this.order_status = 4
					this.getOrderList()
				} else if (index == 4) {
					this.order_status = 5
					this.getOrderList()
				} else {
					// this.order_status = -1
					this.getCancel()
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// console.log(e)
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.page = 1
				this.total = false
				this.orderlist = []
				if (current == 0) {
					this.order_status = 8
					this.getOrderList()
				} else if (current == 1) {
					this.order_status = 2
					this.getOrderList()
				} else if (current == 2) {
					this.order_status = 3
					this.getOrderList()
				} else if (current == 3) {
					this.order_status = 4
					this.getOrderList()
				} else if (current == 4) {
					this.order_status = 5
					this.getOrderList()
				} else {
					// this.order_status = -1
					this.getCancel()
				}

			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.total) {
					this.status = 'nomore'
					return false;
				}
				this.status = 'loading'
				this.page++
				if (this.swiperCurrent == this.list.length - 1) {
					this.getCancel()
				} else {
					this.getOrderList()
				}
			}
		}
	};
</script>

<style>
	.order-list {
		background: white;
		margin-top: 20rpx;
		border-radius: 20rpx;
		width: 690rpx;
		margin-left: 30rpx;
	}

	.order-list-box {
		display: flex;
		align-items: center;
		position: relative;
	}

	.order-status {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 26rpx;
	}

	.order-word {
		padding-left: 20rpx;
	}

	.order-word>view:nth-child(1) {
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
	}

	.order-word>view:nth-child(2) {
		width: 365rpx;
		padding: 25rpx 0;
	}

	.text-font {
		font-size: 26rpx;
		color: #A8A8A8;
	}

	.quxiao-but {
		right: 20rpx;
		bottom: 20rpx;
		position: absolute;
		text-align: center;
		line-height: 60rpx;
		width: 185rpx;
		height: 60rpx;
		border: 2rpx solid rgba(167, 167, 167, 1);
		border-radius: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(167, 167, 167, 1);
	}
</style>
 -->